<template>
  <view class="page-category">
    <uni-nav-bar :border="false" :fixed="true" leftWidth="0" statusBar rightWidth="0" class="uni-nav-bar">
      <view class="navbar-wrap">
        <uni-search-bar
          class="search-bar"
          ref="searchBar"
          radius="30"
          :placeholder="$t('common.keyword_input')"
          clearButton="auto"
          cancelButton="none"
          v-model="searchKeyword"
          @confirm="search"
        />
      </view>
    </uni-nav-bar>
  </view>
  <view class="category-wrap">
    <view v-for="(category, index) in categories" :key="index">
      <view class="module-section category-all-section category-style-wrap mb-1">
        <view class="title" @click="categoryClicked(category.id, category.name)">
          <text class="category-name">{{ category.name }}</text>
          <uni-icons type="right" size="16" color="#cccccc"></uni-icons>
        </view>
        <view class="category-wrapper">
          <view
            v-for="(child, children_index) in category.children"
            :key="children_index"
            class="category"
            @click="categoryClicked(child.id, child.name)"
          >
            <image class="image" :src="child.image" mode="widthFix" />
            <text>{{ child.name }}</text>
          </view>

          <view v-if="!category.children.length" class="category" @click="categoryClicked(category.id, category.name)">
            <image class="image" :src="category.image" mode="widthFix" />
            <text>{{ $t('common.view_all') }}</text>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script setup>
const { proxy } = getCurrentInstance()
const categories = ref([])
const searchKeyword = ref('')

const search = e => {
  uni.navigateTo({
    url: '/pages/category/list/list?keyword=' + e.value,
  })
}

onShow(() => {
  proxy.$util.updateCartTabBar()
  loadData();
  searchKeyword.value = ''
})

const loadData = () => {
  proxy.$http.get('categories', null, {hload: !categories.value.length}).then(res => {
    categories.value = res
  });
};

const categoryClicked = (id, name) => {
  uni.navigateTo({
    url: '/pages/category/list/list?id=' + id + '&name=' + name,
  })
}

// onPullDownRefresh(() => {
//   loadData();
// })
</script>

<style lang="scss" scoped>
@import './index';
</style>
